<html>
<head>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script type="text/javascript" src="/static/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="container-fluid">
        <div style="margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;border-radius: 20px;width:500px;height:320px;">
            <form class="form-horizontal" role="form" @submit.prevent="submit" id="register-form">
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">名字</label>

                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="name" v-model.trim="name" placeholder="请输入名字">
                    </div>
                </div>
                <div class="form-group">
                    <label for="username" class="col-sm-2 control-label">用户名</label>

                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="username" v-model.trim="username" placeholder="请输入用户名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password1" class="col-sm-2 control-label">密码</label>

                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="password1" v-model="password1" placeholder="请输入密码">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password2" class="col-sm-2 control-label">确认密码</label>

                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="password2" v-model="password2" placeholder="请输入确认密码">
                    </div>
                </div>
                <div class="form-group">
                    <label for="email" class="col-sm-2 control-label">邮箱</label>

                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="email" v-model.trim="email" placeholder="请输入邮箱">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-6">
                        <button type="submit" class="btn btn-default">注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" src="/static/js/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#register-form',
        data: {
            name: '',
            username: '',
            password1: '',
            password2: '',
            email: ''
        },
        methods: {
            submit: function () {
                if (this.name == '') {
                    alert('请输入姓名');
                    return false;
                }

                if (this.username == '') {
                    alert('请输入用户名');
                    return false;
                }
                if (this.password1 == '') {
                    alert('请输入密码');
                    return false;
                }
                if (this.password2 == '') {
                    alert('请输入确认密码');
                    return false;
                }
                if (this.password1 != this.password2) {
                    alert('密码与确认密码不一致');
                    return false;
                }
                if (this.email == '') {
                    alert('请输入邮箱');
                    return false;
                }

                $.post('/user/register',this.$data,function(r) {
                    r = $.parseJSON(r);
                    if (r.msg && r.msg.length > 0) {
                        alert(r.msg);
                    }
                    else {
                        alert('注册成功');
                        location.assign('/');
                    }
                });
            }
        }
    })
</script>
</body>
